<template>
  <div class="layout">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="bread">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">会员管理</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="搜索类型">
                <el-select v-model="formInline.type" placeholder="活动区域">
                    <el-option label="姓名" value="name"></el-option>
                    <el-option label="性别" value="gender"></el-option>
                </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-input v-model="formInline.value" placeholder="请输入搜索关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="vips" style="width: 100%">
      <el-table-column prop="_id" label="用户编号" width="205"></el-table-column>
      <el-table-column prop="nickName" label="用户名" width="150"></el-table-column>
      <el-table-column prop="avatarUrl" label="头像">
         <template slot-scope="scope">
          <img :src="scope.row.avatarUrl" alt width="50px" />
        </template>
      </el-table-column>
      <el-table-column prop="province" label="住址"></el-table-column>
      <el-table-column prop="vipdate" label="VIP截止时间">
       
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="280">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="updateToVip(scope.row._id)">充值会员</el-button>
          <el-button   @click="cancleVip(scope.row._id)" type="danger" size="small" >取消会员</el-button>
          <el-button @click="deleteVipById(scope.row._id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[3, 4, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
  
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("vipModules");

export default {
  data() {
    return {
      formInline: {
        value: "",
        type: "",
      },

      currentPage4: 1,
      pageSize: 3,
    };
  },

  created() {
    this.pageingVip();



  },

  computed: {
    ...mapState(["vips", "total", "pages"]),

  },
  mounted() {
    console.log('会员',this.vips)
  },

  methods: {
    ...mapActions([
      "asyncGetAllVip",
      "asyncGetAllVipByLimit",
        "asyncDeleteVip",
        "asyncSearchVip",
        "asyncUpdateVip",
        "asyncCancleVip"
    ]),

    // 分页获取vip信息
    pageingVip() {
      this.asyncGetAllVipByLimit({
        currentPage: this.currentPage4,
        pageSize: this.pageSize,
      });
    },
      // 删除
    deleteVipById(id) {
      this.asyncDeleteVip({ _id: id });
      this.pageingVip();
    },
     // 查询
    onSubmit() {
      console.log("submit!");
      this.asyncSearchVip({
        type: this.formInline.type,
        value: this.formInline.value,
      });
    },
    //充值会员
    updateToVip(id){  
      console.log('充值',{ _id: id })
       this.asyncUpdateVip({ _id: id ,date:"2022-12-22"});


    },  
      //取消会员
    cancleVip(id){  
      console.log('取消',{ _id: id })
       this.asyncCancleVip({ _id: id });


    },  
    
   

    // 分页信息
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage4 = 1;
      this.pageingVip();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.pageingVip();
    },


  }



}
</script>

<style scoped lang="scss">
.layout {
  margin: 15px 0px;
}
.bread{
  margin-bottom: 30px;
  border-bottom: 1px solid #ccc;
}
.block {
  margin-top: 20px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>